<template>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>店铺管理</span>
    <el-button style="float: right; padding: 5px" :type="isedit?'primary':'success'" @click="handleedit">{{isedit?'编辑':'保存'}}</el-button>
  </div>
  <div  class="container">
   <el-form :model="shopinfo" label-width="80px" :disabled="isedit">
  <el-form-item label="店铺名称">
    <el-input v-model="shopinfo.name"></el-input>
  </el-form-item>
    <el-form-item label="店铺公告">
    <el-input type="textarea" v-model="shopinfo.bulletin" rows="5"></el-input>
  </el-form-item>
  <el-form-item label="店铺头像">
  <el-upload
  class="avatar-uploader"
  :action="API+'/shop/upload'"
  :show-file-list="false"
    :on-success="handlesuccess"
 >
  <img v-if="shopinfo.avatar" :src="API+shopinfo.avatar" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> 
</el-form-item>
  <el-form-item label="店铺图片">
<el-upload
  :action="API+'/shop/upload'"
   :on-success="handlepicsuccess"
   :on-remove="handleremovepic"
  list-type="picture-card"
  :file-list="shopinfo.pics"

>
  <i class="el-icon-plus"></i>
</el-upload>
</el-form-item>

   <el-form-item label="配送费">
  <el-input-number v-model="shopinfo.deliveryPrice" ></el-input-number> 
   </el-form-item>
     <el-form-item label="配送时间">
  <el-input-number v-model="shopinfo.deliveryTime" ></el-input-number> 
   </el-form-item>
        <el-form-item label="配送描述">
  <el-input v-model="shopinfo.description" ></el-input> 
   </el-form-item>
     <el-form-item label="店铺评分">
 <el-rate
  v-model="shopinfo.score"
  disableshopinfod
  show-score
  text-color="#ff9900"
>
</el-rate>
   </el-form-item>
      <el-form-item label="店铺销量">
 <el-input-number v-model="shopinfo.sellCount"></el-input-number>
   </el-form-item>
  <el-form-item label="活动">
    <el-checkbox-group v-model="shopinfo.supports">
      <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
      <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
      <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
      <el-checkbox label="特价饮品套餐8折抢购" name="type"></el-checkbox>
      <el-checkbox label="单人特色套餐" name="type"></el-checkbox> 
    </el-checkbox-group>
  </el-form-item>
  <el-form-item  label="营业时间">
    
  <el-time-picker
    is-range
    v-model="shopinfo.date"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>

  </el-form-item>



</el-form>
  </div>
</el-card>
</template>

<script>
import {getshopinfo,shopEdit} from "@/api/shop"
export default {
name:'MyShop',
data(){
    return {
      API:"http://127.0.0.1:5000",
        isedit:true,
        shopinfo:{
            
            name:"",
            bulletin:"",
            avatar:"",
            deliveryPrice:0,
            deliveryTime:0,
            description:"",
            score:0,
            sellCount:0,
            supports:[],
            pics:[],
            date:[]
        },
        value1:'',
        //  fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
   
    }
},
methods: {
  
 async getdata(){
 let res = await  getshopinfo()

//  回填数据前处理好数据
  res.data.data.pics=res.data.data.pics.map(v=>{
    return {
      name:v,
      url:this.API+"/upload/shop/"+v
    }
  })

console.log(res.data.data.pics);

  this.shopinfo=res.data.data
  console.log(res.data.data);
 
  },
  async handleedit(){
    this.isedit=!this.isedit
    if(this.isedit){
      console.log('发ajax数据');
      // 处理参数格式
    let params = JSON.parse(JSON.stringify(this.shopinfo))
    
    // 截取头像名字
    params.avatar=params.avatar.substr(13)
  
  // 获取图片名字数组
  params.pics= params.pics.map((v)=>v.name)
    let res = await  shopEdit(params)
  console.log(res);
    
    }
    

  },
  handlesuccess(res){
    console.log(res);
    this.shopinfo.avatar = res.imgUrl
if(res.code==0){
  this.$message({
    message:res.msg,
    type:"success"
  })
}

  },
  handlepicsuccess(res){
console.log(res);

this.shopinfo.pics.push({
  name:res.imgUrl.substr(13),
  url:this.API+res.imgUrl})

console.log(this.shopinfo.pics);

  },
  handleremovepic(res){
  
  this.shopinfo.pics.forEach((v,i)=>{
    if(v.name==res.name){
      this.shopinfo.pics.splice(i,1)
    }
  })
  }
  
},
created() {
  this.getdata()
},


}
</script>

<style scoped lang="less">
 /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>